<template>
	<div class="order">
		<el-row justify="space-between">
			<el-col :span="4">
				<span>类型</span>
			</el-col>
			<el-col :span="3">
				<span><el-button type="primary" @click="select()"><el-icon><zoom-in /></el-icon>按条件查询</el-button></span>
				<el-dialog v-model="Visible" title="按条件查询订单" :center="true" width="30%">
					<el-date-picker v-model="startTime" type="date" placeholder="订单起始时间"></el-date-picker>
					<el-date-picker v-model="endTime" type="date" placeholder="订单结束时间"></el-date-picker>
					<el-input placeholder="收货电话" />
					<el-input placeholder="收货人" />
				    <template #footer>
				      <div class="dialog-footer">
				        <el-button @click="Visible=false" >取消</el-button>
						<el-button type="primary" @click="getselect()">查询</el-button>
				      </div>
				    </template>
				</el-dialog>
			</el-col>
		</el-row>
		<div class="border-bottom"></div>
		<el-table :data="orders" 
			border style="width: 100% " 
			hide-on-single-page
			height="610" 
			highlight-current-row
		>
			<el-table-column prop="ordid" label="订单号" width="120" />
			<el-table-column prop="phone" label="电话" show-overflow-tooltip />
			<el-table-column prop="nickname" label="收货人" width="120" />
			<el-table-column prop="nickname" label="总价" width="120" />
			<el-table-column  label="是否付款" width="100">
				<template #default="scope">
					<span :class="{'defaultColor':scope.row.ispay==0}">{{filtermoeny(scope.row.ispay)}}</span>
				</template>
			</el-table-column>
			<el-table-column label="发货单号">
				<template #default="scope">
					{{scope.row.shipno}}
				</template>
			</el-table-column>
			<el-table-column prop="addr" label="发货地址" width="200"/>
			<el-table-column  label="下单时间" width="200">
				<template #default="scope">
					{{filterTime(scope.row.tcreate)}}
				</template>
			</el-table-column>
			<el-table-column  label="操作" fixed='right' width="180" >
				<template #default="scope">
					<el-popover placement="left" :width="600" trigger="click">
					    <template #reference>
					      <el-button size="mini" @click="Detailed(scope.row.ordid,scope.row.addr)">明细</el-button>
					    </template>
						<el-row justify="space-between">
							<h4>{{orderid}}&nbsp;&nbsp;#订单详情<b>发往：{{orderaddr}}</b></h4>
						</el-row>
					   <el-table :data="detailedList" border height="260" empty-text="暂无数据">
					      <el-table-column width="110" label="图片" show-overflow-tooltip >
								<template #default="scope">
									<img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" />
								</template>
						  </el-table-column>
						  <el-table-column width="200" property="name" label="商品名称" />
						  <el-table-column width="90" property="price" label="商品价钱" />
						  <el-table-column width="90" property="num" label="商品数量" />
						  <el-table-column width="90"  label="小计" >
							  <template #default="scope">
								  {{scope.row.price*scope.row.num}}
							  </template>
						  </el-table-column>
					    </el-table>
					</el-popover>
					<template v-if="scope.row.ispay==1">
						<template v-if="scope.row.shipno">
							<el-button size="mini" type="success">已发货</el-button>
						</template>
						<template v-else-if="!scope.row.shipno">
							<el-button size="mini" type="success" @click="Delivery(scope.row.ordid)">发货</el-button>
						</template>
					</template>
					
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background
		layout="prev, pager, next"
		:page-size="num"
		:total="sumpages"
		:hide-on-single-page="true"
		v-model:currentPage="page"
		>
		</el-pagination>
		<el-dialog v-model="outerVisible" title="发货确认" :center="true" width="30%">
			<p class="inp"><span>输入发货单号：</span></p>
			<el-input v-model="shipno" />
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="outerVisible=false" >取消</el-button>
				<el-button type="primary" @click="determine()">确定发货</el-button>
		      </div>
		    </template>
		</el-dialog>
	</div>
	
</template>

<script>
	import {mapState} from 'vuex'
	import { ElMessage } from 'element-plus'
	import {ZoomIn} from '@element-plus/icons-vue'
	export default{
		name:'Orders',
		data(){
			return{
				orders:[],
				detailedList:[],//订单明细
				sumpages:0,//总页数
				num:10,//每页显示条数
				page:1,//页数,
				orderid:0,//订单id
				orderaddr:'',//订单地址
				outerVisible:false,
				shipno:'',//输入框单号
				Visible:false,
				startTime:'',//订单起始时间
				endTime:'',//订单结束时间
			}
		},
		watch:{
			page(){
				this.axios.post(`/api/adm/ord/findOrdInfo/${this.page-1}/10`).then((res)=>{
					this.orders=res.data.data.orders
					this.sumpages=res.data.data.total
				})
			}
		},
	    components:{
			ZoomIn
		},
		methods:{
			//查询
			select(){
				this.Visible=true
			},
			//条件查询
			getselect(){
				this.Visible=false;
				let fromdata = new FormData();
				fromdata.append('ispay',0)
				fromdata.append('tstart',this.startTime.getTime())
				fromdata.append('tend',this.endTime.getTime())
				fromdata.append('phone','')
				fromdata.append('nickname','')
				this.axios.post(`api/adm/ord/findOrdInfo/${this.page-1}/10`,fromdata).then((res)=>{
					this.orders=res.data.data.orders;
					this.sumpages=res.data.data.total;
				}).catch((error)=>{
					console.log(error);
				})
			},
			//订单明细
			Detailed(id,addr){
				this.orderid=id;
				this.orderaddr=addr;
				this.axios.get(`/api/adm/ord/findItemInfoByOrdid/${id}`).then((res)=>{
					let data = res.data.data;
					this.detailedList=data;
				}).catch((erroe)=>{
					console.log(error);
				})
			},
			//发货
			Delivery(id){
				this.outerVisible=true;//关闭弹窗
				this.orderid=id;//订单id
				
			},
			//确认发货
			determine(){
				this.outerVisible=false;
				if(this.shipno){
					let new_data = {ordid:this.orderid,shipno:this.shipno}
					this.axios.post('api/adm/ord/addShip',new_data).then((res)=>{
						ElMessage({ message:"发货成功",type: "success"});
						localStorage.setItem('orderid',this.orderid)
						this.shipno='';
					}).catch((error)=>{
						console.log(error);
					})
				}else{
					ElMessage({ message:"单号不能为空，请重新输入！",type: "error"});
				}
			},
			TumTime(t){
				return t>9?t:'0'+t
			}
		},
		created() {
			let now = new Date();
			this.startTime = new Date()
			this.endTime =  new Date()
			this.axios.post(`/api/adm/ord/findOrdInfo/${this.page-1}/10`).then((res)=>{
				this.orders=res.data.data.orders;
				this.sumpages=res.data.data.total;
				console.log(res);
			}).catch((error)=>{
				console.log(error);
			})
		},
		computed:{
			...mapState(['new_token']),
			//过滤时间
			filterTime(){
				return (t)=>{
					let times = new Date(t)
					 let year = times.getFullYear();
					 let month = times.getMonth()+1;
					 let day = times.getDate()
					return `${year}-${this.TumTime(month)}-${this.TumTime(day)}`
				}
			},
			//过滤是否付款
			filtermoeny(){
				return (v)=>{
					return v==0?'未付款':'已付款'
				}
			}
		},
	}
</script>

<style scoped>
	.order{
		width: 100%;
		height: 100%;
	}
	.el-col{
		line-height: 50px;
	}
	.el-col span{
		font-size: 20px;
		font-weight: bold;
	}
	.border-bottom{
		margin: 5px 0;
		border-bottom: 2px solid #7f7f7f;
	}
	:deep(.el-table__cell img){
		width: 60px;
		height: 40px;
	}
	.el-row h4 b{
		margin-left: 20px;
	}
	.inp span{
		margin: 10px 0;
		font-weight: bold;
		font-size: 15px;
	}
	.defaultColor{
		color: #ff2f20;
	}
</style>
